<template>
  <el-form class="login-form" status-icon :rules="loginRules" ref="loginForm" :model="loginForm" label-width="0">
    <el-form-item prop="user">
      <el-input size="small" @keyup.enter.native="handleLogin" v-model="loginForm.user" auto-complete="off" placeholder="请输入用户名">
        <i slot="prefix" class="fa fa-user"></i>
      </el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input size="small" @keyup.enter.native="handleLogin" :type="passwordType" v-model="loginForm.password" auto-complete="off" placeholder="请输入密码">
        <i class="el-icon-view el-input__icon" slot="suffix" @click="showPassword"></i>
        <i slot="prefix" class="fa fa-lock"></i>
      </el-input>
    </el-form-item>
    <el-checkbox v-model="loginForm.rememberMe">记住账号</el-checkbox>
    <el-form-item>
      <el-button type="primary" size="small" @click.native.prevent="handleLogin" class="login-submit">登录</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { isvalidUsername } from '@/utils/validate'
export default {
  name: 'userlogin',
  data() {
    const validateUsername = (rule, value, callback) => {
      if (!isvalidUsername(value)) {
        callback(new Error('请输入正确的用户名'))
      } else {
        callback()
      }
    }
    const validateCode = (rule, value, callback) => {
      if (this.code.value !== value) {
        this.loginForm.code = ''
        this.refreshCode()
        callback(new Error('请输入正确的验证码'))
      } else {
        callback()
      }
    }
    return {
      loginForm: {
          user: '',
          password: '',
          rememberMe:false,
      },
      code: {
        src: '',
        value: '',
        len: 4,
        type: 'text'
      },
      loginRules: {
          user: [
          { required: true, trigger: 'blur', validator: validateUsername }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, message: '密码长度最少为6位', trigger: 'blur' }
          ],
          code: [
            { required: true, message: '请输入验证码', trigger: 'blur' },
            { min: 4, max: 4, message: '验证码长度为4位', trigger: 'blur' },
            { required: true, trigger: 'blur', validator: validateCode }
          ]
      },
      passwordType: 'password'
    }
  },
  props: [],
  methods: {
    showPassword() {
      this.passwordType === ''
        ? (this.passwordType = 'password')
        : (this.passwordType = '')
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
          if (valid) {
              const loading = this.$loading({
                  text: '正在登陆...',
                  background: 'rgba(0, 0, 0, 0.7)'
              });
              this.$post('site/front-login',{SiteloginForm:{'username':this.loginForm.user,'password':this.loginForm.password,'rememberMe':this.loginForm.rememberMe?1:0}})
                  .then((response) => {
                      if (response.data.res==1){
                          showHN = false;
                          let datas = response.data.data;
                          if (datas.rememberMe==1) {
                              this.$cache_.setCookie('user',datas['user'],3600*24*30);
                              this.$cache_.setCookie('gsid',datas['gsid'],3600*24*30);
                              this.$cache_.setCookie('yggh',datas['yggh'],3600*24*30);
                              this.$cache_.setCookie('ygmc',datas['ygmc'],3600*24*30);
                              this.$cache_.setCookie('zuoxi',datas['zuoxi'],3600*24*30);
                              this.$cache_.setCookie('dlxl_',datas['dlxl_'],3600*24*30);
                              this.$cache_.setCookie('allData',JSON.stringify(datas['allData']),3600*24*30);
                              this.$cache_.setCookie('Admin-Token',datas['token'],3600*24*30);
                          }else{
                              this.$cache_.setCookie('user',datas['user']);
                              this.$cache_.setCookie('gsid',datas['gsid']);
                              this.$cache_.setCookie('yggh',datas['yggh']);
                              this.$cache_.setCookie('ygmc',datas['ygmc']);
                              this.$cache_.setCookie('zuoxi',datas['zuoxi']);
                              this.$cache_.setCookie('dlxl_',datas['dlxl_']);
                              this.$cache_.setCookie('allData',JSON.stringify(datas['allData']));
                              this.$cache_.setCookie('Admin-Token',datas['token']);
                          }
                          this.$router.push('/workPlace')
                          this.$message({message:'登录成功！',type:'success'});
                          this.$my_.writeLogs('green','用户登录成功！')
                      }else{
                          this.$message.error('用户或密码错误！');
                      }
                      loading.close();
                  }).catch((response) => {
                  this.$message.error('错误请检查网络！');
                  loading.close();
              });
          } else {
              return false;
          }
      })
    }
  }
}
</script>
<style scoped>
</style>
